<style>

	.container { background-color: #dfdfdf; }
	section { margin-bottom: 10px; background-color: #DEB887; border-radius: 5px; box-shadow: 2px 5px 5px darkgrey;}
	.topline { width: 100%; height: 45px; padding: 0 10px; }
	.topline > .line { width: 100%; height: 100%; }

	.infoblock { width: 100%; height: 100%; padding: 10px 10px; flex-grow: 1; }

	.mainmenu { width: 100%; height: 90px; }
	.mainmenu > div { height: 45px; }
	.button { width: 19%; height: 36px; line-height: 36px; text-align: center; border: 1px outset white; border-radius: 5px; box-shadow: 1px 1px 1px darkgrey;}
	.button.small { width: 15%; height: 32px; line-height: 32px; margin-right: 5px; }

</style>

<article id="vm" class="container">
	<section class="topline">
		<div class="line between">
			<div>timer</div>
			<div>kname</div>
			<div>sname</div>
		</div>
	</section>
	<section class="infoblock">
		
	</section>
	<section class="mainmenu">
		<div class="line">
			<div v-if="curmainmenu < 0"></div>
			<div v-else class="button small"  v-for="val in mainmenu[curmainmenu].child" @click="navito(val.action)">{{val.name}}</div>
		</div>
		<div class="line between">
			<div class="button " v-for="(val, key) in mainmenu" @click="choosemainmenu(key)">{{val.name}}</div>
		</div>
		
	</section>
</article>

<script>
	var vm = new Vue({
		el: "#vm",
		data: {
			mainmenu: [
				{name: '发展', child: [
					{name: '开拓', action: 'm_dev_newland'},
					{name: '开垦', action: 'm_dev_newfield'},
					{name: '砍伐', action: 'm_dev_cut'},
					{name: '堪探', action: 'm_dev_lookfor'},
					{name: '开采', action: 'm_dev_mine'},
					{name: '建设', action: 'm_dev_build'},
				]},
				{name: '政令', child: [
					{name: '税率', action: ''},
					{name: '征税', action: ''},
					{name: '补助', action: ''},
				]},
				{name: '人事', child: [
					{name: '探访', action: ''},
					{name: '任命', action: ''},
					{name: '奖赏', action: ''},
				]},
				{name: '军事', child: [
					{name: '征兵', action: ''},
					{name: '编组', action: ''},
					{name: '训练', action: ''},
					{name: '出征', action: ''},
					{name: '制造', action: ''},
					{name: '运送', action: ''},
				]},
				{name: '外务', child: [
					{name: '缔约', action: ''},
					{name: '解约', action: ''},
					{name: '赠予', action: ''},
					{name: '索取', action: ''},
				]},
			],
			curmainmenu: -1,
		},
		methods: {
			choosemainmenu: function(a){
				if(a == this.curmainmenu){
					this.curmainmenu = -1;
				}else{
					this.curmainmenu = a;
				}
			},
			navito: function(g){
				rd.navito($('body'), 'pages', g);
			}

		},
		mounted(){

		}
	})
	
</script>